<template>
    <div>
        <div class="collection">
            <div class="container">
                <div class="head">
                    <div class="top">
                        <div class="iconfont" @click="$router.back()">
                            &#xe624;
                        </div>
                        <h1>菜谱</h1>
                        <div></div>
                    </div>
                    <div class="head_top">
                        <div class="info">
                            共{{obj.arr.length}}篇菜谱
                        </div>
                        <div class="outher">
                            <div class="manage" @click="obj.show = !obj.show">
                                {{ obj.show == false ? '管理' : '完成'}}
                            </div>
                            <!-- <div class="search">
                                <div class="iconfont">
                                    &#xeb86;
                                </div>
                                搜索
                            </div> -->
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="list" v-for="(item,index) in obj.arr" :key="index">
                        <div class="del" v-show="obj.show" @click="del(index)">
                            <div class="iconfont">
                                &#xe74b;
                            </div>
                        </div>
                        <div class="list_cont"  @click="go(index)">
                            <div class="img">
                                <img :src="item.result.recipe.original_photo_path" alt="">
                            </div>
                            <div class="info">
                                <h4>{{ item.result.recipe.title }}</h4>
                                <span>1.0万人看过</span>
                                <div class="outher">
                                    <img :src="item.result.recipe.user.user_photo" alt="">
                                    <span>{{ item.result.recipe.user.nickname }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { useStore } from "../store/index";
import { useRouter } from 'vue-router';
import { reactive } from '@vue/runtime-core';
import { getJsonAbout } from "../api/home.js";
    export default {
        setup(){
            let router = useRouter();
            let store = useStore(); 
            let obj = reactive({
                arr: [],
                show:false
            })

            store.caihistory.forEach(item =>{
                getdata(item)
            })

            function getdata(id) {
                getJsonAbout(id).then(data =>{
                    obj.arr.push(data)
                    console.log(data);
                })
            }
            
            function del(index) {
                obj.arr.splice(index,1);
                store.caihistory.splice(index,1)
            }
            function go(ind) {
                let id = store.caihistory[ind];
                router.push({
                    path: "/about",
                    query: {
                        id
                    }
                })
            }
            return{
                obj,
                del,
                go
            }
        }
    }
</script>

<style lang="scss" scoped>
.collection{
    .head{
        .top{
            padding: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            h1{
                font-size: 16px;
                padding-right: 16px;
            }
        }
        .head_top{
            display: flex;
            padding: 5px 16px;
            justify-content: space-between;
            align-items: center;
            .info{
                font-size: 15px;
                color: #D0D0D0;
            }
            .outher{
                font-size: 13px;
                color: #333;
                display: flex;
                .manage{
                    padding: 0 8px;
                }
                .search{
                    display: flex;
                    position: relative;
                    padding: 0 8px;
                    &::before{
                        content: "";
                        width: 0px;
                        height: 20px;
                        border-left: 2px solid #EAEAEA;
                        position: absolute;
                        top: 0px;
                        left: 0px;
                    }
                }
            }
        }
    }
        .content {
            padding: 16px;
    
            .list {
                padding-bottom: 16px;
                display: flex;
                .del{
                    width: 25px;
                    display: flex;
                    align-items: center;
                    position: relative;
                    &>.iconfont{
                        color: red;
                        font-weight: bold;
                        font-size: 24px;
                        position: absolute;
                        left: -10px;

                    }
                }
                .list_cont{
                    flex: 1;
                    display: flex;
                    position: relative;
                    .img {
                        padding-right: 10px;
        
                        img {
                            width: 176px;
                            height: 122px;
                            border-radius: 4px;
                            display: block;
                        }
                    }
        
                    .info {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
        
                        h4 {
                            font-size: 14px;
                            color: #333;
                            font-weight: normal;
                            padding-bottom: 8px;
                        }
        
                        span {
                            font-size: 12px;
                            color: #616161;
                            display: block;
                            padding-bottom: 8px;
                        }
        
                        .outher {
                            display: flex;
                            align-items: center;
        
                            img {
                                width: 18px;
                                height: 18px;
                                border-radius: 50%;
                            }
        
                            span {
                                font-size: 12px;
                                color: #CAC6C3;
                                padding: 0 0 0 5px;
                            }
                        }
                    }
                }
            }
        }
}
</style>